<!-- 登录 -->
<template>
	<view class="container d-flex">
		<view class="head relative d-flex">
			<image src="/static/logo.svg" mode="widthFix" class="logo absolute"></image>

			<view class="head_content d-flex pl-100 mb-100">
				<text class="head_title">数据精灵</text>
				<text class="head_jg ml-20 mr-20">|</text>
				<text class="head_describe relative">真诚，是一种态度</text>
			</view>
		</view>

		<Tabs class="mb-80" @onValue="onTabs" />

		<CodeLogin ref="codeDom" v-show="active === 0" @ruleForm="onForm" />
		<PassLogin ref="passDom" v-show="active === 1" @ruleForm="onForm" />

		<view class="handle d-flex mb-30">
			<navigator class="handle_btn activeText" url="/pages/forget/index">忘记密码</navigator>
			<navigator class="handle_btn activeText" url="/pages/Register/index">立即注册</navigator>
		</view>

		<Protocol ref="tocol" class="mb-100" describe="未注册的手机号将自动注册。" />

		<view class="footer">
			<uv-button class="submit" @tap="submit">登录</uv-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import Icon from '@/components/Icon/index.vue'
	import CodeLogin from '@/pages/Login/components/codeLogin.vue'
	import PassLogin from '@/pages/Login/components/passLogin.vue'
	import Tabs from '@/pages/Login/components/Tabs.vue'
	import {
		onLogin
	} from '@/api/user'
	import Protocol from '@/components/Protocol/index.vue'

	const codeDom = ref(null)
	const passDom = ref(null)

	const active = ref(0)

	const tocol = ref(null)

	const onTabs = e => {
		active.value = e
	}

	// 登录
	const submit = () => {
		active.value === 0 && codeDom.value.submit()
		active.value === 1 && passDom.value.submit()
	}

	const ruleForm = ref(null)

	const onForm = async e => {
		const xy = await tocol.value.submit()

		if (!xy) return

		ruleForm.value = e

		uni.showLoading({
			title: '正在登陆中，请稍等...',
			mask: true,
		})

		try {
			const res = await onLogin(ruleForm.value)
			uni.setStorageSync('token', res.data.token)
			uni.setStorageSync('userInfo', {
				username: res.data.nickname
			})
			uni.showToast({
				title: '登录成功',
				icon: 'success',
				duration: 5000,
				success: () => {
					uni.switchTab({
						url: '/pages/Home/index'
					})
				}
			})
		} catch (err) {
			uni.hideLoading()
			uni.showToast({
				title: '登录失败',
				icon: 'error',
				duration: 500
			})
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 25rpx 50rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.head {
			width: 100%;

			.logo {
				width: 200rpx;
				top: -60rpx;
				left: -50rpx;
				margin-right: -120rpx;
			}

			&_content {
				align-items: center;
			}

			&_title {
				color: #404040;

				font: {
					weight: bold;
					size: 36rpx;
				}
			}

			&_jg {
				font: {
					size: 36rpx;
				}
			}

			&_describe {
				top: 6rpx;

				font: {
					size: 42rpx;
					family: fangsong;
					weight: bold;
				}
			}
		}

		.handle {
			width: 100%;
			align-items: center;
			justify-content: space-between;

			&_btn {
				font: {
					size: 24rpx
				}
			}
		}

		.footer {
			width: 100%;

			.submit {
				width: 100%;

				::v-deep {
					.uv-button {
						height: 90rpx;
						color: #fff;
						background-color: #8065EA;
						border-radius: 20rpx;
					}
				}
			}
		}
	}

	::v-deep {
		.uv-checkbox-group {
			flex: none;
			width: 100%;

			.uv-checkbox__label-wrap {
				flex: 1 1 auto;
				width: 1%;
			}
		}

		.uv-checkbox {
			align-items: baseline;
			width: 100%;

			.checkbox {
				top: 4rpx;
				flex-wrap: wrap;
				line-height: 42rpx;

				font: {
					size: 28rpx
				}

				&_btn {
					white-space: nowrap;
				}
			}
		}
	}
</style>